<template>
  <div class="main">
    <img :src="$store.state.appBg" class="bg1" alt>
    <div class="title">投票</div>
    <div class="lesson-list">
      <scroll-container ref="scrollContainer">
        <div class="voter-head">
          <div class="intro" data-index="tar_0_0" :class="{fir_active: groupData.focArr[0][0]}">
            <img class="cover" :src="voteItem.img.fhd" alt>
            <div class="info">
              <p class="voter-title">{{voteItem.name}}</p>
              <p class="desc">
                {{
                voteItem.introduce.substring(0,43) + '...'
                }}
                <a v-if="voteItem.introduce.length > 43">全文</a>
              </p>
              <hr>
              <div class="item">
                <span>结束时间</span>
                <span>{{voteItem.more.end}}</span>
              </div>
              <div class="item">
                <span>可用票数</span>
                <span>{{voteItem.more.hasvote}}</span>
              </div>
            </div>
          </div>
          <div class="more" data-index="tar_0_1" :class="{active: groupData.focArr[0][1]}">
            <img src="@/assets/images/xyfc/voter-more.jpg" alt>
          </div>
        </div>

        <div v-if="this.voteItem.more.itemType === 0">
          <p class="voter-option">投票项</p>
          <multiList @scrollTo="scrollTo" :groupDatas="groupData" :groupOffset="0">
            <div class="item-list">
              <div
                v-for="(item, index) in groupData.dataArr[1].data"
                :key="index"
                class="con"
                :class="{active: groupData.focArr[1][index]}"
              >
                <div class="item-head">
                  <span class="num">{{index}}</span>
                  <span class="vote-status">已投票</span>
                </div>
                <img :src="item.img.fhd" class="bg" alt>
                <img src="@/assets/images/imglist_w384/t_bg.png" class="t_bg" alt>
                <div class="text" :data-index="'tar_1_'+index">
                  <span>{{ item.name }}</span>
                  <span>共{{ item.count }}票</span>
                </div>
              </div>
            </div>
          </multiList>
        </div>
        <div v-if="this.voteItem.more.itemType === 2">
          <multiList @scrollTo="scrollTo" :groupDatas="groupData" :groupOffset="0">
            <div v-for="(item, rIndex) in formateGroupData" :key="rIndex">
              <p class="voter-option">{{ item[0].introduce}}</p>
              <div class="item-list">
                <div
                  v-for="(option,cIndex) in item"
                  :key="cIndex"
                  class="con-text"
                  :class="{active: groupData.focArr[(rIndex+1)][cIndex]}"
                >
                  <i
                    class="unchecked"
                    :data-index="'tar_'+(rIndex+1)+'_'+(cIndex)"
                    :class="{checked: checkedOptions[rIndex][0] === option.id }"
                  ></i>
                  <p class="option">{{option.name}}</p>
                </div>
              </div>
            </div>
            <hr>
            <div
              class="btn"
              :class="{btn_active: groupData.focArr[(groupData.focArr.length - 1)][0]}"
            >确认提交
            </div>
          </multiList>
        </div>
      </scroll-container>
    </div>
    <msg :msgValue="msg"></msg>
  </div>
</template>
<script>
  import scrollContainer from "@/components/base/scroll-container/scroll-container";
  import multiList from "@/components/base/multi-list/multi-list";
  import imglist_w312 from "../ImgList_w312";
  import msg from "@/components/msg";
  import {types} from "util";

  export default {
    components: {
      scrollContainer,
      multiList,
      imglist_w312,
      msg
    },
    methods: {
      scrollTo(targetIndex) {
        this.$refs.scrollContainer.scrollTo(targetIndex);
      },
      setBackObj(backObj) {
        this.hs.cookie.set(this.backObjName, JSON.stringify(backObj));
      },
      getData() {
        let listSize;
        // 获取素材.
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/find?columnId=10",
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              listSize = data.body.listSize;
              this.hs.ajax.get(
                "http://" +
                this.$store.state.domain +
                "/SMSCH-STB/material/list?columnId=" +
                data.body.id +
                "&pageNum=1&pageSize=" +
                listSize +
                "&schoolId=" +
                this.$store.state.school.id,
                data => {
                  data = JSON.parse(data);
                  //console.log(data);
                  if (data.head.code === 1) {
                    let index = this.vindex == -1 ? 0 : this.vindex;
                    this.materialId = data.body[index].id
                    this.hs.ajax.get(
                      "http://" +
                      this.$store.state.domain +
                      "/SMSCH-STB/material/find?materialId=" +
                      data.body[index].id +
                      "&schoolId=" +
                      this.$store.state.school.id,
                      data => {
                        data = JSON.parse(data);
                        //console.log(data);
                        if (data.head.code === 1) {
                          this.voteItem = data.body;
                        }
                      },
                      0,
                      function (msg) {
                      },
                      3000
                    );
                  }
                },
                0,
                function (msg) {
                },
                3000
              );
            }
          },
          0,
          function (msg) {
          },
          3000
        );

        // 获取可用票数
        let url = "http://" + this.$store.state.domain + "/SMSCH-STB/vote/has?voteId=" + this.voteItem.more.id + "&stbid=" + this.bridge.stbid +
          "&schoolId=" + this.$store.state.school.id
        if (this.$store.state.user.username) url += '&user=' + this.$store.state.user.username
        this.hs.ajax.get(
          url,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.voteItem.more.hasvote = data.body;
            }
          },
          0,
          function (msg) {
          },
          3000
        );
        // alert(this.voteItem.more.hasvote);
        //0图片1视频2文字3轮播
        //console.log("itemType------:" + this.voteItem.more.itemType);

        // 获取选项列表
        this.hs.ajax.get(
          // "http://" +  this.$store.state.domain + "/SMSCH-STB/vote/items?voteId=" + this.voteItem.more.id + '&pageNum=' + this.bridge.stbid + '&pageSize=10',
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/vote/items?voteId=" +
          this.voteItem.more.id,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              if (this.voteItem.more.itemType == 2) {
                // 初始化
                data.body.forEach((item, index) => {
                  if (this.formateGroupData.length === 0) {
                    this.formateGroupData.push([data.body[index]]);
                    return;
                  }
                  this.formateGroupData.forEach((item, ind) => {
                    if (
                      this.formateGroupData[ind][0]["introduce"] ===
                      data.body[index].introduce
                    ) {
                      this.formateGroupData[ind].push(data.body[index]);
                    } else if (ind === this.formateGroupData.length - 1) {
                      this.formateGroupData.push([data.body[index]]);
                    }
                  });
                });
                //console.log('formateGroupData:', this.formateGroupData);

                // 初始化数据逻辑焦点的
                this.formateGroupData.forEach((item, index) => {
                  this.groupData.dataArr.push({
                    maxLine: 4,
                    dynamic: false,
                    title: "投票选项",
                    data: item
                  });
                  // 设置添加焦点空数组
                  this.groupData.focArr.push([]);
                  // 设置区域数组,0为固定
                  this.groups.push(index + 1);
                  // 增加选中项的空数组,注意区域偏移1
                  this.checkedOptions.push([]);
                });
                // 添加投票按钮焦点
                this.groupData.dataArr.push({
                  maxLine: 1,
                  dynamic: false,
                  title: "投票按钮",
                  data: [
                    {
                      title: "投票按钮"
                    }
                  ]
                });
                this.groups.push(this.groups.length);
              } else if (this.voteItem.more.itemType == 0) {
                this.groupData.dataArr.push({
                  maxLine: 4,
                  dynamic: false,
                  title: "投票选项",
                  data: data.body
                });
                // 设置区域数组,0为固定
                this.groups.push(this.groups[this.groups.length - 1] + 1);
              }
            }
          },
          0,
          function (msg) {
          },
          3000
        );
      },
      voteCommits(voteItemIds) {
        let parame = {
          voteId: this.voteItem.more.id,
          voteItemIds: voteItemIds,
          stbid: this.bridge.stbid
        };

        if (Object.keys(this.$store.state.user).length > 0)
          parame.user = this.$store.state.user.username
        this.hs.ajax.post(
          "http://" + this.$store.state.domain + "/SMSCH-STB/vote/excs",
          parame,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code !== 1) {
              this.msg = {msg: data.head.desc};
              return;
            }
            //console.log(data.body);
            this.msg = {
              msg: "投票成功.", dosome: () => {
                this.$router.push("/xyfc/voter_all/");
              }
            };
          },
          0,
          function (msg) {
          },
          3000
        );
      },
    },

    created() {
      this.getData();
    },
    mounted() {
      this.hs.initFocus("0-0");
      // 处理所有点击逻辑
      this.hs.addSelect(this.groups, (group, objid, objindex) => {
        //console.log({group});
        if (group === 0) {
          this.setBackObj({backFocArr: [this.hs.focObj.objid]});
          if (objindex === 0) {
            this.$router.push("/xyfc/voter_intro/" + this.materialId);
          } else if (objindex === 1) {
            this.$router.push("/xyfc/voter_all/");
          }
        } else if (group > 0) {
          //图片
          if (this.voteItem.more.itemType == 0) {
            this.$router.push(
              "/xyfc/voter_detail/" + this.voteItem.more.id + "/" + objindex
            );
            //文字
          } else if (this.voteItem.more.itemType == 2) {
            if (group === this.groupData.dataArr.length - 1) {
              // 合并答案结果
              let parame = [];
              this.checkedOptions.forEach((item, index) => {
                parame = parame.concat(item);
              });

              // 判断有无全部选择答案
              if (parame.length !== this.formateGroupData.length) {
                this.msg = {msg: "请完成所有投票选项后再点击提交!"};
                return
              }
              // 提交答案
              this.voteCommits(parame);
            } else {
              // 添加答案 选中时的数组索引偏移量为1
              this.$set(this.checkedOptions, group - 1, [
                this.groupData.dataArr[group].data[objindex].id
              ]);
              //console.log(this.checkedOptions[group - 1][0]);
            }
          }
        }
      });

      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        //console.log(JSON.stringify(focArr));
        this.hs.initFocus(focArr[0]);
      }
    },
    data() {
      return {
        groups: [0],
        scrollY: 0,
        backObjName: "tbkt",
        hs: this.$store.state.hs,
        bridge: this.$store.state.bridge,
        head: {
          left: "0-0"
        },
        msg: "",
        // 投票的索引
        vindex: this.$route.params.vindex,
        // 投票
        voteItem: {},
        materialId: '',
        // 选项
        formateGroupData: [],
        checkedOptions: [],
        groupData: {
          dataArr: [
            {
              maxLine: 2,
              dynamic: false,
              title: "",
              data: [
                {
                  title: "投票介绍",
                  cover: require("@/assets/images/tbkt/msgkk/lmjs.jpg"),
                  count: 0
                },
                {
                  title: "更多投票",
                  cover: require("@/assets/images/tbkt/msgkk/lmjs.jpg"),
                  count: 0
                }
              ]
            }
          ],
          focArr: [[], []]
        }
      };
    }
  };
</script>
<style lang="less" scoped>
  .main {
    position: relative;
    left: 0px;
    top: 0px;
    width: 1920px;
    height: 1080px;
    display: flex;
    .title {
      position: absolute;
      top: 77px;
      right: 121px;
      font-size: 60px;
      color: #e8e8e8;
    }
    .bg1 {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 1920px;
      height: 1080px;
      z-index: -1;
    }
    .lesson-list {
      margin-top: 184px;
      margin-left: 90px;
      flex-grow: 1;
      overflow: hidden;
      /deep/ .scroll-container-list {
        padding-bottom: 60px;
      }
      .voter-head {
        display: flex;
        padding-left: 32px;
        padding-top: 20px;
        margin-bottom: 48px;
        .intro {
          width: 1248px;
          height: 354px;
          padding: 16px;
          background-color: #3693bf;
          box-shadow: inset 2px 3px 7px 0px rgba(0, 0, 0, 0.35);
          border-radius: 8px;
          overflow: hidden;
          display: flex;
          .cover {
            width: 800px;
            height: 322px;
            overflow: hidden;
          }
          .info {
            width: 384px;
            display: flex;
            margin-left: 23px;
            flex-direction: column;
            .voter-title {
              font-size: 36px;
              color: #ffffff;
            }
            .desc {
              margin: 10px 0;
              height: 108px;
              font-size: 24px;
              line-height: 34px;
              color: #a8e7ff;
              a {
                color: #fbff92;
              }
            }
            .item {
              margin-top: 20px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              span:nth-child(1) {
                height: 30px;
                background-color: #74c1e5;
                border-radius: 16px;
                font-size: 22px;
                padding: 0 15px;
                line-height: 30px;
                color: #1c6486;
              }
              span:nth-child(2) {
                font-size: 28px;
                line-height: 30px;
                color: #ffffff;
              }
            }
          }
        }
        .more {
          overflow: hidden;
          margin-left: 48px;
          width: 384px;
          height: 354px;
        }
        .nav_foc {
          box-sizing: border-box;
          border: 2px solid #ffffff;
          border-radius: 8px;
          transform: scale(1.1);
          -webkit-transform: scale(1.1);
        }
      }
      hr {
        height: 2px;
        border: solid 1px #74c1e5;
      }
      .voter-option {
        padding-left: 30px;
        font-size: 36px;
        color: #a8e7ff;
      }
      .btn {
        text-align: center;
        margin: 30px auto;
        width: 328px;
        height: 100px;
        background-color: #53cfff;
        border-radius: 49px;
        font-size: 48px;
        line-height: 100px;
        margin-bottom: 50px;
      }
      .btn_active {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
        border: 2px solid #fff;
        background: #0e60e9;
        color: #fff;
      }
      .item-list {
        margin-top: 48px;
        margin-left: -48px;
        padding-left: 30px;
        display: flex;
        flex-shrink: 0;
        flex-wrap: wrap;
        .con-text {
          position: relative;
          margin-left: 48px;
          margin-bottom: 48px;
          overflow: hidden;
          width: 384px;
          height: 144px;
          background-color: #74c1e5;
          border-radius: 8px;
          display: flex;
          align-items: center;
          font-size: 36px;
          color: #414141;
          .unchecked {
            width: 60px;
            height: 60px;
            margin-left: 48px;
            border-radius: 8px;
            background: #fff;
            overflow: hidden;
          }
          .checked {
            background: url("../../assets/images/xyfc/checked.png") center no-repeat;
          }
          .option {
            margin-left: 22px;
            width: 200px;
            flex-shrink: 0;
            font-size: 24px;
          }
        }
        .con {
          position: relative;
          margin-left: 48px;
          margin-bottom: 102px;
          overflow: hidden;
          width: 384px;
          height: 214px;
          background-color: #b7b7b7;
          border-radius: 8px;
          .item-head {
            z-index: 999;
            top: 10px;
            position: absolute;
            width: 100%;
            display: flex;
            justify-content: space-between;
            font-size: 22px;
            .num {
              width: 41px;
              text-align: center;
              position: relative;
              color: #000;
            }
            .num::before {
              z-index: -1;
              position: absolute;
              top: 0;
              content: "";
              display: block;
              width: 41px;
              height: 0;
              border-right: 20px solid transparent;
              border-top: 31px solid #ffcc00;
            }
            .vote-status {
              margin-right: 10px;
              color: #ffcc00;
              background: #414141;
              width: 74px;
              height: 31px;
              line-height: 31px;
              border-radius: 5px;
            }
          }
        }
        .bg {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 384px;
          height: 214px;
          border-radius: 8px;
        }
        .t_bg {
          position: absolute;
          left: 0px;
          top: 158px;
          width: 384px;
          height: 56px;
          background-color: #000000;
          opacity: 0.7;
          border-bottom-right-radius: 9px;
          border-bottom-left-radius: 9px;
        }
        .text {
          position: absolute;
          left: 14px;
          top: 172px;
          width: 356px;
          height: 30px;
          font-size: 30px;
          font-weight: normal;
          font-stretch: normal;
          line-height: 30px;
          text-align: center;
          color: #ffffff;
          display: flex;
          justify-content: space-between;
        }
        .t_move {
          position: absolute;
          left: 0px;
          top: 0px;
          width: 356px;
          height: 30px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .sub_title {
          position: absolute;
          left: 0px;
          top: 238px;
          width: 384px;
          height: 30px;
          .name,
          .time {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 192px;
            height: 30px;
            line-height: 30px;
            font-size: 30px;
          }
          .time {
            left: 192px;
            text-align: right;
          }
        }
      }
      .content {
        height: 896px;
        overflow: hidden;
      }
    }
    .active {
      border: 2px solid #ffffff;
      border-radius: 8px;
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
      box-sizing: border-box;
      .checked {
        background: url("../../assets/images/xyfc/checked-active.png") center no-repeat !important;
      }
    }
    .fir_active {
      border: 2px solid #ffffff;
      border-radius: 8px;
      transform: scale(1.05);
      -webkit-transform: scale(1.05);
    }
  }
</style>
